<!DOCTYPE html>
<!--
    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); you may not use this file except in compliance
    with the License.  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.
--><html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
<meta name="generator" content="joDoc">
<title>Apache Cordova API Documentation</title>
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" type="text/css" href="mobile.css" media="only screen and (max-device-width: 1024px)">
<link rel="stylesheet" type="text/css" href="prettify/prettify.css">
</head>
<body>
        <div id="header">
            <h1><a href="index.html">Apache <strong>Cordova</strong> Documentation</a></h1>
            <small>
                <select><optgroup label="English" value="en">
<option value="edge">edge</option>
<option value="2.2.0rc2">2.2.0rc2</option>
<option value="2.2.0rc1">2.2.0rc1</option>
<option selected value="2.2.0">2.2.0</option>
<option value="2.1.0rc2">2.1.0rc2</option>
<option value="2.1.0rc1">2.1.0rc1</option>
<option value="2.1.0">2.1.0</option>
<option value="2.0.0rc1">2.0.0rc1</option>
<option value="2.0.0">2.0.0</option>
<option value="1.9.0rc1">1.9.0rc1</option>
<option value="1.9.0">1.9.0</option>
<option value="1.8.1">1.8.1</option>
<option value="1.8.0rc1">1.8.0rc1</option>
<option value="1.8.0">1.8.0</option>
<option value="1.7.0rc1">1.7.0rc1</option>
<option value="1.7.0">1.7.0</option>
<option value="1.6.1">1.6.1</option>
<option value="1.6.0rc1">1.6.0rc1</option>
<option value="1.6.0">1.6.0</option>
<option value="1.5.0rc1">1.5.0rc1</option>
<option value="1.5.0">1.5.0</option>
<option value="1.4.1">1.4.1</option>
<option value="1.4.0rc1">1.4.0rc1</option>
<option value="1.4.0">1.4.0</option>
<option value="1.3.0">1.3.0</option>
<option value="1.2.0">1.2.0</option>
<option value="1.1.0">1.1.0</option>
<option value="1.0.0rc3">1.0.0rc3</option>
<option value="1.0.0rc2">1.0.0rc2</option>
<option value="1.0.0rc1">1.0.0rc1</option>
<option value="1.0.0">1.0.0</option>
<option value="0.9.6">0.9.6</option>
<option value="0.9.5.1">0.9.5.1</option>
<option value="0.9.5">0.9.5</option>
<option value="0.9.4">0.9.4</option>
<option value="0.9.3">0.9.3</option>
<option value="0.9.2">0.9.2</option>
</optgroup>
<optgroup label="Español" value="es"><option value="1.0.0">1.0.0</option></optgroup>
<optgroup label="Français" value="fr">
<option value="1.3.0">1.3.0</option>
<option value="1.2.0">1.2.0</option>
<option value="1.1.0">1.1.0</option>
</optgroup>
<optgroup label="Japanese" value="jp">
<option value="2.0.0">2.0.0</option>
<option value="1.9.0">1.9.0</option>
<option value="1.8.1">1.8.1</option>
<option value="1.7.0">1.7.0</option>
<option value="0.9.5">0.9.5</option>
</optgroup>
<optgroup label="Korean" value="kr"><option value="2.0.0">2.0.0</option></optgroup></select></small>
        </div>
        <div id="subheader">
            <h1>Embedding Cordova WebView on iOS</h1>
            <small><select><option value="Embedding%2520Cordova%2520WebView%2520on%2520iOS">Embedding Cordova WebView on iOS</option>
<option value="Embedding%20Cordova%20WebView%20on%20iOS_prerequisites">      - Prerequisites</option>
<option value="Embedding%20Cordova%20WebView%20on%20iOS_adding_cleaver_to_your_xcode_project_cordovalib_sub_project">      - Adding Cleaver to your Xcode project (CordovaLib sub-project)</option>
<option value="Embedding%20Cordova%20WebView%20on%20iOS_using_cdvviewcontroller_in_your_code">      - Using CDVViewController in your code</option>
<option value="Embedding%20Cordova%20WebView%20on%20iOS_adding_your_html_css_and_javascript_assets">      - Adding your HTML, CSS and JavaScript assets</option></select></small>
        </div>

        <div id="sidebar">
            <div class="vertical_divider"></div>
        <h1>API Reference</h1>
<ul>
<li><a href="cordova_accelerometer_accelerometer.md.html#Accelerometer">Accelerometer</a></li>
<li><a href="cordova_camera_camera.md.html#Camera">Camera</a></li>
<li><a href="cordova_media_capture_capture.md.html#Capture">Capture</a></li>
<li><a href="cordova_compass_compass.md.html#Compass">Compass</a></li>
<li><a href="cordova_connection_connection.md.html#Connection">Connection</a></li>
<li><a href="cordova_contacts_contacts.md.html#Contacts">Contacts</a></li>
<li><a href="cordova_device_device.md.html#Device">Device</a></li>
<li><a href="cordova_events_events.md.html#Events">Events</a></li>
<li><a href="cordova_file_file.md.html#File">File</a></li>
<li><a href="cordova_geolocation_geolocation.md.html#Geolocation">Geolocation</a></li>
<li><a href="cordova_globalization_globalization.md.html#Globalization">Globalization</a></li>
<li><a href="cordova_media_media.md.html#Media">Media</a></li>
<li><a href="cordova_notification_notification.md.html#Notification">Notification</a></li>
<li><a href="cordova_splashscreen_splashscreen.md.html#Splashscreen">Splashscreen</a></li>
<li><a href="cordova_storage_storage.md.html#Storage">Storage</a></li>
</ul>
<h1>Guides</h1>
<ul>
<li><a href="guide_getting-started_index.md.html#Getting%20Started%20Guides">Getting Started Guides</a></li>
<li><a href="guide_command-line_index.md.html#Command-Line%20Usage">Command-Line Usage</a></li>
<li><a href="guide_upgrading_index.md.html#Upgrading%20Guides">Upgrading Guides</a></li>
<li><a href="guide_project-settings_index.md.html#Project%20Settings">Project Settings</a></li>
<li><a href="guide_plugin-development_index.md.html#Plugin%20Development%20Guide">Plugin Development Guide</a></li>
<li><a href="guide_whitelist_index.md.html#Domain%20Whitelist%20Guide">Domain Whitelist Guide</a></li>
<li><a href="guide_cordova-webview_index.md.html#Embedding%20WebView">Embedding WebView</a></li>
<li><a href="_index.html">Keyword Index</a></li>
</ul>
</div>

        <div id="scrollable">
            <div id="content">
                <h1><a name="Embedding%20Cordova%20WebView%20on%20iOS">Embedding Cordova WebView on iOS</a></h1>

<p>Beginning with Cordova 1.4, you can use Cordova as a component in your iOS applications. This component is code-named "Cleaver".</p>

<p>New Cordova-based applications created using the Xcode template provided in Cordova 1.4 or greater use Cleaver, and this template is considered the reference implementation for Cleaver.</p>

<p>Beginning with Cordova 2.0.0 and greater, we only support the sub-project based Cleaver implementation from now on.</p>

<h2>
<a name="Embedding%20Cordova%20WebView%20on%20iOS_prerequisites">Prerequisites</a>
</h2>

<ol>
<li>
<strong>Cordova 2.1.0</strong> or greater</li>
<li>
<strong>Xcode 4.5</strong> or greater</li>
<li>
<code>Cordova.plist</code> file (from a <a href="guide_command-line_index.md.html#Command-Line%20Usage_ios">newly created</a> Cordova project)</li>
</ol>
<h2>
<a name="Embedding%20Cordova%20WebView%20on%20iOS_adding_cleaver_to_your_xcode_project_cordovalib_sub_project">Adding Cleaver to your Xcode project (CordovaLib sub-project)</a>
</h2>

<ol>
<li>
<strong>Download and extract the Cordova source</strong> to a <strong>permanent folder location</strong> on your hard drive (say to ~/Documents/Cordova)</li>
<li>
<strong>Quit Xcode</strong> if it is running.</li>
<li>
<strong>Navigate</strong> to the directory where you put the downloaded source above, using <strong>Terminal.app</strong>.</li>
<li>
<strong>Copy</strong> the <code>Cordova.plist</code> file into your project folder on disk (see <strong>Prerequisites</strong> above)</li>
<li>
<strong>Drag and drop</strong> the <code>Cordova.plist</code> file into the Project Navigator of Xcode</li>
<li>
<strong>Choose</strong> the radio-button <strong>"Create groups for any added folders"</strong>, select the <strong>Finish</strong> button</li>
<li>
<strong>Drag and drop</strong> the <code>CordovaLib.xcodeproj</code> file into the Project Navigator of Xcode (from the permanent folder location above, and it should be in the CordovaLib sub-folder)</li>
<li>Select <code>CordovaLib.xcodeproj</code> in the Project Navigator</li>
<li>Press the key combination <strong>Option-Command-1</strong> to <a href="cordova_splashscreen_splashscreen.md.html#show">show</a> the <strong><a href="cordova_file_file.md.html#File">File</a> Inspector</strong>
</li>
<li>Choose <strong>"Relative to Group"</strong> in the <strong><a href="cordova_file_file.md.html#File">File</a> Inspector</strong> for the drop-down menu for <strong>Location</strong> </li>
<li>Select the <strong>project icon</strong> in the Project Navigator, select your <strong>Target</strong>, then select the <strong>"Build Settings"</strong> tab</li>
<li>Add <code>-all_load</code> and <code>-Obj-C</code> - for the <strong>"Other Linker <a href="cordova_file_file.md.html#Flags">Flags</a>"</strong> value</li>
<li>Click on the <strong>project icon</strong> in the Project Navigator, select your <strong>Target</strong>, then select the <strong>"Build Phases"</strong> tab</li>
<li>Expand <strong>"Link Binaries with Libraries"</strong> </li>
<li>
<p>Select the <strong>"+" button</strong>, and add these <strong>frameworks</strong> (and optionally in the Project Navigator, <strong>move</strong> them under the Frameworks group):</p>

<pre class="prettyprint"><code>AddressBook.framework
AddressBookUI.framework
AudioToolbox.framework
AVFoundation.framework
CoreLocation.framework
MediaPlayer.framework
QuartzCore.framework
SystemConfiguration.framework
MobileCoreServices.framework
CoreMedia.framework
</code></pre>
</li>
<li><p>Expand <strong>"Target Dependencies"</strong> - the top box labeled like this if you have multiple boxes!</p></li>
<li>Select the <strong>"+" button</strong>, and add the <code>CordovaLib</code> build product</li>
<li>Expand <strong>"Link Binaries with Libraries"</strong> - the top box labeled like
this if you have multiple boxes!</li>
<li>Select the <strong>"+" button</strong>, and add <code>libCordova.a</code>
</li>
<li>Set the Xcode preference <strong>"Xcode Preferences -&gt; Locations -&gt; Derived Data -&gt; Advanced…"</strong> to <strong>"Unique"</strong>
</li>
<li>Select the <strong>project icon</strong> in the Project Navigator, select your <strong>Target</strong>, then select the <strong>"Build Settings"</strong> tab</li>
<li>
<p>Search for <strong>"Header Search Paths"</strong>. For that setting, add these three values below (with quotes):</p>

<pre class="prettyprint"><code>"$(TARGET_BUILD_DIR)/usr/local/lib/include"


"$(OBJROOT)/UninstalledProducts/include"


"$(BUILT_PRODUCTS_DIR)"
</code></pre>

<p>With <strong>Cordova 2.1.0</strong>, CordovaLib has been upgraded to use <strong>Automatic Reference Counting (ARC)</strong>. You don't need to upgrade to <strong>ARC</strong> to use CordovaLib, but if you want to upgrade your project to use <strong>ARC</strong>, please use the Xcode migration wizard from the menu: <strong>Edit -&gt; Refactor -&gt; Convert to Objective-C ARC…</strong>, <strong>de-select libCordova.a</strong>, then run the wizard to completion. </p>
</li>
</ol>
<h2>
<a name="Embedding%20Cordova%20WebView%20on%20iOS_using_cdvviewcontroller_in_your_code">Using CDVViewController in your code</a>
</h2>

<ol>
<li>
<p>Add this <strong>header</strong>:</p>

<pre class="prettyprint"><code>#import &lt;Cordova/CDVViewController.h&gt;
</code></pre>
</li>
<li>
<p>Instantiate a <strong>new</strong> <code>CDVViewController</code>, and retain it somewhere: </p>

<pre class="prettyprint"><code>CDVViewController* viewController = [CDVViewController new];
</code></pre>
</li>
<li>
<p>(<em>OPTIONAL</em>) Set the <code>wwwFolderName</code> property (defaults to <code>"www"</code>):</p>

<pre class="prettyprint"><code>viewController.wwwFolderName = @"myfolder";
</code></pre>
</li>
<li>
<p>(<em>OPTIONAL</em>) Set the <code>startPage</code> property (defaults to <code>"index.html"</code>):</p>

<pre class="prettyprint"><code>viewController.startPage = @"mystartpage.html";
</code></pre>
</li>
<li>
<p>(<em>OPTIONAL</em>) Set the <code>useSplashScreen</code> property (defaults to <code>NO</code>):</p>

<pre class="prettyprint"><code>viewController.useSplashScreen = YES;
</code></pre>
</li>
<li>
<p>Set the <strong>view frame</strong> (always set this as the last property):</p>

<pre class="prettyprint"><code>viewController.view.frame = CGRectMake(0, 0, 320, 480);
</code></pre>
</li>
<li>
<p><strong>Add</strong> Cleaver to your view:</p>

<pre class="prettyprint"><code>[myView addSubview:viewController.view];
</code></pre>
</li>
</ol>
<h2>
<a name="Embedding%20Cordova%20WebView%20on%20iOS_adding_your_html_css_and_javascript_assets">Adding your HTML, CSS and JavaScript assets</a>
</h2>

<ol>
<li>Create a <strong>new folder</strong> in your project <strong>on disk</strong>, for example, name it <code>www</code>
</li>
<li>Put your <strong>HTML, CSS and JavaScript assets</strong> into this folder</li>
<li>
<strong>Drag and drop</strong> the folder into the Project Navigator of Xcode</li>
<li>
<strong>Choose</strong> the radio-button <strong>"Create folder references for any added folders"</strong>
</li>
<li>
<p><strong>Set the appropriate <code>wwwFolderName</code> and <code>startPage</code> properties</strong> for the folder you created in <strong>(1)</strong> or use the defaults (see previous section) when you instantiate the <code>CDVViewController</code>.</p>

<pre class="prettyprint"><code>/*
 if you created a folder called 'myfolder' and
 you want the file 'mypage.html' in it to be 
 the startPage
*/
viewController.wwwFolderName = @"myfolder";
viewController.startPage = @"mypage.html"
</code></pre>
</li>
</ol>
</div>
        </div>

        <!-- Functionality and Syntax Highlighting -->
        <script type="text/javascript" src="index.js"></script><script type="text/javascript" src="prettify/prettify.js"></script>
</body>
</html>
